<!DOCTYPE html>

<html>
  <head>
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <style>
      html {
        height: 40px;
      }
      body {
        background: #fffddd;
        font: 16px Arial;
        height: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
      }
      em {
        font-weight: bold;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <script language="javascript">
function parseParameter(parameters) {
  var objParas = {};
  var strParas = parameters.split('&');
  for(var i = 0; i < strParas.length; i++) {
    var sp = strParas[i].indexOf('=');
    var key, value;
    if(sp == -1) {
      key = strParas[i];
      value = "";
    } else {
      key = strParas[i].substr(0, sp);
      value = strParas[i].substr(sp + 1);
    }
    objParas[key] = decodeURIComponent(value);
  }
  return objParas;
}

var port = null;
$(function() {
  var parameters = parseParameter(window.location.hash.substring(1));
  var tabId = parseInt(parameters.tabId);

  port = chrome.tabs.connect(tabId);
  port.onMessage.addListener(function(msg) {
    if(msg.type == 'close') {
      window.close();
    }
  });
  port.onDisconnect.addListener(function() {
    port = null;
  });

  $('#domainSelect').change(function() {
    $("select[id*='domainSelect'] option:selected").each(function() {
      var value = $(this).val();
      if(value.length > 0) {
        $('#domainBox').val(value);
      }
    });
  });
  $('#domainBox').keyup(function() {
    var text = $('#domainBox').val();
    $("select[id='domainSelect'] option:selected").attr('selected', false);
    var selectFound = false;
    $("select[id='domainSelect'] option[value='" + text + "']").each(function() {
      $(this).attr('selected', true);
      selectFound = true;
    });
    if(!selectFound) {
      $('#optionOther').attr('selected', true);
    }
  });
  chrome.extension.sendRequest(
    {
      type: "getDomainList",
      domain: parameters.domain
    },
    function(response) {
      var recommend = response.recommendDomain;
      for(var i = 0; i < response.domainList.length; i++) {
        var domain = response.domainList[i];
        $('<option value="' + domain + '">' + domain + '</option>').appendTo('#domainSelect');
      }
      $('<option id="optionOther" value="">Other</option>').appendTo('#domainSelect');
      $('#domainBox').val(response.recommendDomain);
      $('#domainBox').keyup();
    }
  );
  $('#btnOK').click(function() {
    var psw = $('#passwordBox').val();
    var domain = $('#domainBox').val();
    chrome.extension.sendRequest(
      {
        type: "calcEncryptedPassword",
        password: psw,
        domain: domain
      },
      function(response) {
        if(port != null) {
          port.postMessage({
            type: "fillPassword",
            password: response.password
          });
        }
      }
    );
    window.close();
  });
  $('#passwordBox').focus();
});
    </script>
    <a>Please enter your password</a>
    <input type="password" id="passwordBox" />
    <input type="submit" value="OK" id="btnOK" />
    <a>Domain</a>
    <input type="text" id="domainBox" />
    <select id="domainSelect" />
  </body>
</html>
